<template>
    <!-- 商品反填部分 -->
    <div class="traceability-container">
        <!-- 商品信息卡片 -->
        <div class="product-card">
            <!-- 封面 -->
            <div class="product-cover">
                <img :src="GoodsData.Cover" alt="商品图片" class="product-image" />
            </div>
            <!-- 显示信息 -->
            <div class="product-info">
                <h1 class="product-name">{{ GoodsData.GoodsName }}</h1>

                <div class="info-row">
                    <div class="info-item">
                        <span class="info-label">生产批次：</span>
                        <span class="info-value">{{ GoodsData.Order }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">保质期：</span>
                        <span class="info-value">{{ GoodsData.Expired }}天</span>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-item">
                        <span class="info-label">生产许可证号：</span>
                        <span class="info-value">{{ GoodsData.Allownum }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">生产企业：</span>
                        <span class="info-value">{{ GoodsData.Companyname }}</span>
                    </div>
                </div>
                <div class="inspection-report">
                    <h3 class="report-title">产品检验报告</h3>
                    <div class="report-image-container">
                        <img :src="GoodsData.Check" alt="检验报告" class="report-image" />
                    </div>
                </div>
            </div>
            <!-- 操作按钮区域 -->
            <div class="action-buttons">

                <el-button type="primary" class="action-btn" @click="GoGoods()">返回商品页面</el-button>
            </div>
        </div>
        <!-- 养殖 屠宰 深加工模块 -->
        <div class="process-tabs-container">
            <el-tabs v-model="activeName" class="process-tabs" @tab-click="handleClick">
                <!-- 养殖模块 -->
                <el-tab-pane label="养殖" name="first">
                    <div class="breed-info-container">
                        <!-- 养殖信息显示 -->
                        <div class="breed-header">
                            <span class="breed-title">养殖信息</span>
                            <el-button type="default" @click="OpenUpdateBreed = true">设置</el-button>
                        </div>
                        <div class="breed-content">

                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">品种：</span>
                                    <span class="info-value">{{ BreedData.Kindname }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">来源：</span>
                                    <span class="info-value">{{ BreedData.Form }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">饲养天数：</span>
                                    <span class="info-value">{{ BreedData.Cycle }}天</span>
                                </div>
                            </div>
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">饲料品牌：</span>
                                    <span class="info-value">{{ BreedData.Foodbrand }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">饲养负责人：</span>
                                    <span class="info-value">{{ BreedData.Breeders }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">出栏日期：</span>
                                    <span class="info-value"> {{ moment(BreedData.Endtime).format("yyyy-MM-DD")
                                    }}</span>
                                </div>
                                <!-- 编辑养殖信息 -->
                                <el-dialog v-model="OpenUpdateBreed" title="养殖编辑" width="1000" center draggable>
                                    <!-- {{ BreedData }} -->
                                    <el-form ref="ruleFormRef" style="max-width: 1000px" :model="BreedData" status-icon
                                        label-width="auto" class="demo-ruleForm">
                                        <!-- 第一行：两个字段并排 -->
                                        <el-row :gutter="20" style="margin-top: 20px">
                                            <el-col :span="8">
                                                <el-form-item label="品种" prop="Kindname">
                                                    <el-select v-model="BreedData.Kindname" placeholder="请选择兔子品种"
                                                        style="width: 240px">
                                                        <el-option label="灰兔" value="灰兔" />
                                                        <el-option label="白兔" value="白兔" />
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="来源" prop="Form">
                                                    <el-select v-model="BreedData.Form" placeholder="请选择兔子品种"
                                                        style="width: 240px">
                                                        <el-option label="采购" value="采购" />
                                                        <el-option label="养殖" value="养殖" />
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <!-- 第二行：两个字段并排 -->
                                        <el-row :gutter="20" style="margin-top: 20px">
                                            <el-col :span="8">
                                                <el-form-item label="饲养天数" prop="Cycle">
                                                    <el-input v-model="BreedData.Cycle" />
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="饲料品牌" prop="Foodbrand">
                                                    <el-select v-model="BreedData.Foodbrand" placeholder="请选择兔子品种"
                                                        style="width: 240px">
                                                        <el-option label="洁西" value="洁西" />
                                                        <el-option label="华畜" value="华畜" />
                                                        <el-option label="爱宝" value="爱宝" />
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <!-- 第三行：两个字段并排 -->
                                        <el-row :gutter="20" style="margin-top: 20px">
                                            <el-col :span="8">
                                                <el-form-item label="饲养负责人" prop="Breeders">
                                                    <el-input v-model="BreedData.Breeders" />
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="出栏日期" prop="Endtime">
                                                    <el-date-picker v-model="BreedData.Endtime" type="datetime"
                                                        placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss"
                                                        value-format="x" />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-form-item>
                                            <el-button type="primary" @click="UpdateBreedway()">
                                                保存
                                            </el-button>
                                            <el-button @click="StepUpdateBreed()">取消</el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-dialog>
                            </div>
                        </div>
                        <!-- 免疫信息显示 -->
                        <div class="breed-info-container">
                            <div class="breed-header">
                                <span class="breed-title">免疫信息</span>
                                <el-button type="default" @click="Addarray()">添加一行</el-button>
                                <el-button type="default" @click="Keeparray()">保存</el-button>
                            </div>
                            <div>
                                <el-table :data="VaccinateinfoArray" style="width: 700px">
                                    <el-table-column type="index" label="序号" width="80" />
                                    <el-table-column prop="Time" label="天数" width="120">
                                        <template v-slot="scope">
                                            <el-input v-model="scope.row.Time" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="Way" label="方式" width="120">
                                        <template v-slot="scope">
                                            <el-input v-model="scope.row.Way" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="Reason" label="原因" width="120">
                                        <template v-slot="scope">
                                            <el-input v-model="scope.row.Reason" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作" min-width="120">
                                        <template #default="scope">
                                            <el-button type="danger" @click="DelArray(scope.$index, 1)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <!-- 动检证 -->
                        <div class="breed-header">
                            <span class="breed-title">动检证</span>
                            <el-button type="default" @click="">设置</el-button>
                        </div>
                        <div style="margin-top: 20px;">
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="BreedData" label-width="auto">
                                <!-- <el-form-item label="单图" prop="Check"> 
                                    <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                                        :show-file-list="false" :on-success="Checkway"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="BreedData.Check" :src="BreedData.Check" class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item> -->
                                <el-form-item label="" prop="多图">
                                    <el-upload v-model:file-list="fileLists"
                                        action="http://localhost:5017/api/Goods/Upload" limit="6"
                                        list-type="picture-card" :on-preview="CheckPictureCardPreview"
                                        :on-remove="CheckRemove" :on-success="CheckAdd">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                    </el-upload>

                                    <el-dialog v-model="dialogVisible">
                                        <img w-full :src="dialogImageUrl" alt="查看图片" />
                                    </el-dialog>

                                </el-form-item>
                            </el-form>
                        </div>
                        <!-- 企业信息 -->
                        <div class="breed-header">
                            <span class="breed-title">企业信息</span>
                            <el-button type="default" @click="OpenUpedateCompany = true">设置</el-button>
                        </div>
                        <div class="breed-content">

                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">养殖地:</span>
                                    <span class="info-value">{{ BreedData.Farm }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">负责人：</span>
                                    <span class="info-value">{{ BreedData.Farmer }}</span>
                                </div>
                            </div>
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">存栏数量</span>
                                    <span class="info-value">{{ BreedData.Number }}</span>
                                </div>
                            </div>
                            <!-- 编辑企业信息 -->
                            <el-dialog v-model="OpenUpedateCompany" title="养殖编辑" width="1000" center draggable>
                                <!-- {{ BreedData }} -->
                                <el-form ref="ruleFormRef" style="max-width: 1000px" :model="BreedData" status-icon
                                    label-width="auto" class="demo-ruleForm">
                                    <!-- 第一行：三个字段并排 -->
                                    <el-row :gutter="20" style="margin-top: 20px">
                                        <el-col :span="8">
                                            <el-form-item label="养殖场" prop="Farm">
                                                <el-select v-model="BreedData.Farm" placeholder="请选择养殖场"
                                                    style="width: 240px">
                                                    <el-option label="牛牯湾生态养殖区" value="牛牯湾生态养殖区" />
                                                    <el-option label="江泉农牧产业园" value="江泉农牧产业园" />
                                                    <el-option label="曹妃甸（养殖基地）" value="曹妃甸（养殖基地）" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="负责人" prop="Farmer">
                                                <el-select v-model="BreedData.Farmer" placeholder="请选择兔子品种"
                                                    style="width: 240px">
                                                    <el-option label="华" value="华" />
                                                    <el-option label="苏" value="苏" />
                                                    <el-option label="樱" value="樱" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="存栏数量" prop="Number">
                                                <el-input-number v-model="BreedData.Number" :min="0" :max="100000" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item>
                                        <el-button type="primary" @click="UpdateBreedway()">
                                            保存
                                        </el-button>
                                        <el-button @click="StepUpdateCompany()">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-dialog>
                        </div>
                        <!-- 企业照片 -->
                        <div class="breed-header">
                            <span class="breed-title">企业照片</span>
                            <div>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="BreedData" label-width="auto">
                                <el-form-item label="" prop="Companyphoto">
                                    <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                                        :show-file-list="false" :on-success="Companyphotoway"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="BreedData.Companyphoto" :src="BreedData.Companyphoto"
                                            class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-tab-pane>
                <!-- 屠宰模块 -->
                <el-tab-pane label="屠宰" name="second">

                    <div class="breed-info-container">
                        <!-- 屠宰信息显示 -->
                        <div class="breed-header">
                            <span class="breed-title">屠宰信息</span>
                            <el-button type="default" @click="OpenUpdateKill = true">设置</el-button>
                        </div>
                        <div class="breed-content">

                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">批次:</span>
                                    <span class="info-value">{{ GoodsData.Order }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">到厂均重</span>
                                    <span class="info-value">{{ KillData.Weight }}</span>
                                </div>

                            </div>
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">到厂时间:</span>
                                    <span class="info-value">{{
                                        moment(KillData.Arrivetime).format("yyyy年MM月DD日HH:MM:ss") }}</span>
                                </div>

                                <div class="info-item">
                                    <span class="info-label">屠宰时间：</span>
                                    <span class="info-value"> {{ moment(KillData.Killtime).format("yyyy年MM月DD日HH:MM:ss")
                                    }}</span>
                                </div>
                                <!-- 编辑企业信息 -->
                                <el-dialog v-model="OpenUpdateKill" title="屠宰编辑" width="1000" center draggable>
                                    <!-- {{ KillData }} -->
                                    <el-form ref="ruleFormRef" style="max-width: 1000px" :model="BreedData" status-icon
                                        label-width="auto" class="demo-ruleForm">
                                        <!-- 第一行：三个字段并排 -->
                                        <el-row :gutter="20" style="margin-top: 20px">
                                            <el-col :span="8">
                                                <el-form-item label="批次:" prop="Order">
                                                    <el-input v-model="GoodsData.Order" disabled />
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="到厂均重:" prop="Weight">
                                                    <el-input v-model="KillData.Weight" />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20" style="margin-top: 20px">
                                            <el-col :span="8">
                                                <el-form-item label="到厂时间:" prop="Arrivetime">
                                                    <el-date-picker v-model="KillData.Arrivetime" type="datetime"
                                                        placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss"
                                                        value-format="x" />
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="屠宰时间:" prop="Killtime">
                                                    <el-date-picker v-model="KillData.Killtime" type="datetime"
                                                        placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss"
                                                        value-format="x" />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-form-item>
                                            <el-button type="primary" @click="UpdateKillway()">
                                                保存
                                            </el-button>
                                            <el-button @click="StepKillUpdate()">取消</el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-dialog>
                            </div>
                        </div>
                        <!-- 相关资质显示 -->
                        <div class="breed-info-container">
                            <div class="breed-header">
                                <span class="breed-title">相关资质</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="BreedData" label-width="auto">
                                <el-form-item label="" prop="Check">
                                    <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                                        :show-file-list="false" :on-success="KillCheckway"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="KillData.Check" :src="KillData.Check" class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                        </div>
                        <!-- 企业信息 -->
                        <div class="breed-header">
                            <span class="breed-title">企业信息</span>
                            <el-button type="default" @click="OpenKillCompany = true">设置</el-button>
                        </div>
                        <div class="breed-content">

                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">公司名称:</span>
                                    <span class="info-value">{{ KillData.Companyname }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">成立时间:</span>
                                    <span class="info-value">{{ KillData.Borntime }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">公司地址</span>
                                    <span class="info-value">{{ KillData.Arrive }}</span>
                                </div>
                            </div>
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">公司简介</span>
                                    <span class="info-value">{{ KillData.Introduction }}</span>
                                </div>
                            </div>
                            <!-- 编辑企业信息 -->
                            <el-dialog v-model="OpenKillCompany" title="公司信息编辑" width="1000" center draggable>
                                <!-- {{ KillData }} -->
                                <el-form ref="ruleFormRef" style="max-width: 1000px" :model="BreedData" status-icon
                                    label-width="auto" class="demo-ruleForm">
                                    <!-- 第一行：三个字段并排 -->
                                    <el-row :gutter="20" style="margin-top: 20px">
                                        <el-col :span="8">
                                            <el-form-item label="公司名称:" prop="Companyname">
                                                <el-input v-model="KillData.Companyname" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="成立日期:" prop="Farm">
                                                <el-date-picker v-model="KillData.Borntime" type="datetime"
                                                    placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss"
                                                    value-format="x" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="公司地址:" prop="Arrive">
                                                <el-input v-model="KillData.Arrive" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="20" style="margin-top: 20px">
                                        <el-col :span="8">
                                            <el-form-item label="简介:" prop="Farm">
                                                <el-input v-model="KillData.Introduction" style="width: 240px"
                                                    :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                                                    placeholder="Please input" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item>
                                        <el-button type="primary" @click="UpdateKillway()">
                                            保存
                                        </el-button>
                                        <el-button @click="StepKillCompany()">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-dialog>
                        </div>
                        <!-- 企业照片 -->
                        <div class="breed-header">
                            <span class="breed-title">企业照片</span>
                            <div>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="BreedData" label-width="auto">
                                <el-form-item label="" prop="Companyphoto">
                                    <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                                        :show-file-list="false" :on-success="KillCompanyphotoway"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="KillData.Companyphoto" :src="KillData.Companyphoto" class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-tab-pane>
                <!-- 深加工模块 -->
                <el-tab-pane label="深加工" name="third">
                    <div class="breed-info-container">
                        <!-- 屠宰信息显示 -->
                        <div class="breed-header">
                            <span class="breed-title">深加工信息</span>
                            <el-button type="default" @click="OpenUpdateKill = true">设置</el-button>
                        </div>
                        <div class="breed-content">

                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">班组:</span>
                                    <span class="info-value">{{ DeepData.Team }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">负责人</span>
                                    <span class="info-value">{{ DeepData.Director }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 相关资质显示 -->
                        <div class="breed-info-container">
                            <div class="breed-header">
                                <span class="breed-title">食品安全信息</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="BreedData" label-width="auto">
                                <el-form-item label="" prop="Check">
                                    <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                                        :show-file-list="false" :on-success="DeepCheckway"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="DeepData.Foodcheck" :src="DeepData.Foodcheck" class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                        </div>
                        <!-- 企业信息 -->
                        <div class="breed-header">
                            <span class="breed-title">供应商信息</span>
                            <el-button type="default" @click="OpenKillCompany = true">设置</el-button>
                        </div>
                        <div class="breed-content">

                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">公司名称:</span>
                                    <span class="info-value">{{ KillData.Companyname }}</span>
                                </div>

                            </div>
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="info-label">生成批次:</span>
                                    <span class="info-value">{{ GoodsData.Order }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">生产许可证号:</span>
                                    <span class="info-value">{{ GoodsData.Allownum }}</span>
                                </div>
                            </div>
                            <!-- 编辑企业信息 -->
                            <el-dialog v-model="OpenKillCompany" title="公司信息编辑" width="1000" center draggable>
                                <!-- {{ KillData }} -->
                                <el-form ref="ruleFormRef" style="max-width: 1000px" :model="BreedData" status-icon
                                    label-width="auto" class="demo-ruleForm">
                                    <!-- 第一行：三个字段并排 -->
                                    <el-row :gutter="20" style="margin-top: 20px">
                                        <el-col :span="8">
                                            <el-form-item label="公司名称:" prop="Companyname">
                                                <el-input v-model="KillData.Companyname" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="成立日期:" prop="Farm">
                                                <el-date-picker v-model="KillData.Borntime" type="datetime"
                                                    placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss"
                                                    value-format="x" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="公司地址:" prop="Arrive">
                                                <el-input v-model="KillData.Arrive" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="20" style="margin-top: 20px">
                                        <el-col :span="8">
                                            <el-form-item label="简介:" prop="Farm">
                                                <el-input v-model="KillData.Introduction" style="width: 240px"
                                                    :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                                                    placeholder="Please input" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item>
                                        <el-button type="primary" @click="UpdateKillway()">
                                            保存
                                        </el-button>
                                        <el-button @click="StepKillCompany()">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-dialog>
                        </div>
                        <!-- 企业照片 -->
                        <div class="breed-header">
                            <span class="breed-title">企业照片</span>
                            <div>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="BreedData" label-width="auto">
                                <el-form-item label="" prop="Companyphoto">
                                    <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                                        :show-file-list="false" :on-success="DeepCompanyphotoway"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="DeepData.Companyphoto" :src="DeepData.Companyphoto" class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';  //页面跳转
axios.defaults.baseURL = "http://localhost:5017"
const router = useRouter();
// 页面加载时获取商品数据
onMounted(() => {
    GetGoodsData();// 反填商品
});

//#region  商品详情-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

var GoodsData = reactive({ // 商品信息变量
    "Id": null,
    "GoodsName": "",
    "Order": "",
    "Expired": null,
    "Allownum": "",
    "Companyname": "",
    "Cover": "",
    "Check": "",
    "Finiststate": "",
    "Creator": "",
    "Createtime": "", //本地当前时间
    "Modifier": "",
    "Breedid": null,
    "Killid": null,
    "Deepprocessid": null
})

const GetGoodsData = () => { // 商品反填 - 从API获取商品详情
    axios.get("/api/Goods/OneGetGoods", { params: { Id: localStorage.getItem("GoodsId") } }).then(res => {
        Object.assign(GoodsData, res.data.Data)  //获取商品信息
        console.log(GoodsData);
        GetBreedway(res.data.Data.Breedid);
        GetKillway(res.data.Data.Killid);
        GetDeepData(res.data.Data.Deepprocessid)
    })
}

// 返回商品列表页面
const GoGoods = () => {
    router.push("/Goods")
}
//#endregion

//#region   养殖 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

//动检证 多图这一块
const fileLists = ref([{
    name: "",
    url: "",
    // response: "",
    // uid:"",
    // status:""
}
])  //动检证图片信息数组
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const CheckAdd: UploadProps['onSuccess'] = (data1: any, data2: any) => {  //多图添加图片上传成功时执行
    console.log(data2);  //本次新图片的信息
    var index = fileLists.value.length; console.log(index + 1);  //多余数据的下标
    fileLists.value.splice(index - 1, 1);  //去掉多余的数据
    fileLists.value.push({ //存入新图片
        name: data2.name,
        url: data2.response
    })
    console.log(fileLists.value); //查看存储结果
    BreedData.Check = JSON.stringify(fileLists.value)  //变量转参数
    UpdateBreedway()  //修改表数据方法
}
const CheckRemove: UploadProps['onRemove'] = (date1: any, date2: any) => {  //动检证图片移除成功时执行
    BreedData.Check = JSON.stringify(fileLists.value) //变量转参数
    UpdateBreedway()  //修改
}
const CheckPictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {  //多图中的单图详情
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
// const Checkway: UploadProps['onSuccess'] = (issrc: any) => { //检查图片上传
//     BreedData.Check = issrc
// }
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => { //图片过滤
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/gif' &&
        rawFile.type !== 'image/png' &&
        rawFile.type !== 'image/avif') {
        ElMessage.error('文件格式不正确!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件不能超过 2MB!')
        return false
    }
    return true
}

const Companyphotoway: UploadProps['onSuccess'] = (issrc: any) => { //企业图片上传
    BreedData.Companyphoto = issrc
}


//图片部分
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import type { UploadUserFile } from 'element-plus'
import { ElMessage, type TabsPaneContext } from 'element-plus'
import moment from 'moment';  //日期格式
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => { // 处理标签页点击事件
    console.log(tab, event)
}
var BreedData = reactive({ // 养殖数据
    "Id": null,
    "Kindname": "",
    "Form": "",
    "Cycle": null,
    "Foodbrand": "",
    "Breeders": "",
    "Endtime": "",
    "Vaccinateinfo": "",
    "Check": "",
    "Farm": "",
    "Farmer": "",
    "Number": null,
    "Companyphoto": "",

})
//反序列化变量
const VaccinateinfoArray: any = ref([])


const GetBreedway = (Id: any) => {  //反填养殖信息反填
    axios.get("/api/Breeds/GetBreedOne", {
        params: {
            BreedId: Id
        }
    }).then(res => {
        Object.assign(BreedData, res.data.Data);
        console.log(BreedData);
        VaccinateinfoArray.value = JSON.parse(res.data.Data.Vaccinateinfo)  //后端字符串反序列化为数组 用于列表显示
        console.log(VaccinateinfoArray.value);
        fileLists.value = JSON.parse(res.data.Data.Check)

    })
}

const Addarray = () => { //尾部追加空行
    VaccinateinfoArray.value.push({ "Time": "", "Way": "", "Reason": "" })
}

const DelArray = (num: any, key: any) => { //删除某一行
    VaccinateinfoArray.value.splice(num, key);
}

const Keeparray = () => { //数组保存
    BreedData.Vaccinateinfo = JSON.stringify(VaccinateinfoArray.value); //数组序列化成字符串
    UpdateBreedway();  //免疫数据修改
}


//对话框修改这一块
const OpenUpdateBreed = ref(false); //打开修改养殖对话框
const StepUpdateBreed = () => {  //取消修改养殖
    OpenUpdateBreed.value = false; //关闭对话框
}
const OpenUpedateCompany = ref(false);  //打开修改企业对话框
const StepUpdateCompany = () => {  //取消修改企业
    OpenUpedateCompany.value = false; //关闭对话框
}
const UpdateBreedway = () => {  //养殖所有信息修改

    axios.put("/api/Breeds/UpdateBreed", BreedData).then(res => {
        if (res.data.Num == 200) {
            ElMessage.success(res.data.Message);
            OpenUpdateBreed.value = false; //关闭对话框
            OpenUpedateCompany.value = false;
        } else {
            ElMessage.error(res.data.Message);
        }
    })
}
//#endregion 

//#region  屠宰-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 

const KillData = reactive({  //屠宰信息变量
    "Id": null,
    "Weight": null,
    "Arrivetime": "",
    "Killtime": "",
    "Check": "",
    "Companyname": "",
    "Borntime": "",
    "Arrive": "",
    "Introduction": "",
    "Companyphoto": ""
})

const GetKillway = (Id: any) => {  //反填商品时获取屠宰信息  
    axios.get("/api/Kills/GetKill", {
        params: {
            KillId: Id
        }
    }).then(res => {
        //获取屠宰信息
        Object.assign(KillData, res.data.Data);
        console.log(KillData); //查看数据
    })
}
const KillCheckway: UploadProps['onSuccess'] = (issrc: any) => { //检查图片上传
    KillData.Check = issrc
}
const KillCompanyphotoway: UploadProps['onSuccess'] = (issrc: any) => { //企业图片上传
    KillData.Companyphoto = issrc
}
const OpenUpdateKill = ref(false);  //开关屠宰修改
const OpenKillCompany = ref(false) //开关屠宰公司信息
const UpdateKillway = () => {  //屠宰信息修改
    axios.put("/api/Kills/UpdateKill", KillData).then(res => {
        if (res.data.Num == 200) {
            ElMessage.success(res.data.Message);
            // OpenUpdateBreed.value = false; //关闭对话框
            // OpenUpedateCompany.value = false;
            OpenUpdateKill.value = false;
            OpenKillCompany.value = false;
        } else {
            ElMessage.error(res.data.Message);
        }
    })
}
const StepKillUpdate = () => {  //关闭屠宰修改
    OpenUpdateKill.value = false;
}
const StepKillCompany = () => {  //关闭屠宰公司信息修改
    OpenKillCompany.value = false;
}
//#endregion

//#region  深加工 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

const DeepData = reactive({  //深加工模块参数
    "Id": null,
    "Team": "",
    "Director": "",
    "Foodcheck": "",
    "Accessories": "",
    "Additive": "",
    "Packaging": "",
    "Companyname": "",
    "Companyphoto": ""
})

const GetDeepData = (Id: any) => {
    axios.get("/api/DDeepProcesss/GetDeepProcess", {  //反填商品时获取深加工信息 
        params: {
            DeepProcessId: Id
        }
    }).then(res => {
        //获取屠宰信息
        Object.assign(DeepData, res.data.Data);
        console.log(DeepData); //查看数据
    })
}
const DeepCheckway: UploadProps['onSuccess'] = (issrc: any) => { //检查图片上传
    DeepData.Foodcheck = issrc
}
const DeepCompanyphotoway: UploadProps['onSuccess'] = (issrc: any) => { //企业图片上传
    DeepData.Companyphoto = issrc
}
//#endregion
</script>

<style scoped>
/* 图片 */
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    /* 保持比例并填充，避免变形 */
    border-radius: 6px;
    /* 和边框一致圆角 */
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
}

/* 主容器样式 */
.traceability-container {
    padding: 20px;
    min-height: calc(100vh - 120px);
    background-color: #f5f7fa;
}

/* 商品卡片样式 */
.product-card {
    display: flex;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 32px;
    margin-bottom: 28px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #ebeef5;
}

.product-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* 商品图片区域 */
.product-cover {
    flex: 0 0 240px;
    margin-right: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #e8e8e8;
    transition: all 0.4s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-image:hover {
    transform: scale(1.04);
    border-color: #409eff;
    box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
}

/* 商品信息区域 */
.product-info {
    flex: 1;
    min-width: 0;
}

.product-name {
    font-size: 26px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 28px;
    line-height: 1.4;
    position: relative;
    padding-bottom: 12px;
}

.product-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #409eff, #5cb85c);
    border-radius: 2px;
}

/* 信息行样式 */
.info-row {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.info-item {
    flex: 1;
    min-width: 280px;
    margin-bottom: 12px;
    padding: 16px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.info-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #dcdfe6;
}

.info-label {
    color: #606266;
    font-weight: 500;
    margin-right: 12px;
    font-size: 15px;
    display: inline-block;
    min-width: 80px;
}

.info-value {
    color: #303133;
    font-weight: 400;
    font-size: 15px;
    word-break: break-all;
}

/* 检验报告样式 */
.inspection-report {
    display: flex;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e4e7ed;
    background: linear-gradient(transparent, rgba(64, 158, 255, 0.03));
    padding: 24px;
    border-radius: 8px;
    margin-top: 28px;
}

.report-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 24px 0 0;
    white-space: nowrap;
    position: relative;
    padding-left: 16px;
}

.report-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom, #409eff, #5cb85c);
    border-radius: 2px;
}

.report-image-container {
    flex: 0 0 auto;
    display: flex;
    gap: 20px;
}

.report-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    padding: 6px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.report-image:hover {
    border-color: #409eff;
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 6px 16px rgba(64, 158, 255, 0.2);
}

/* 操作按钮区域 */
.action-buttons {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-left: 52px;
    min-width: 140px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #ebeef5;
}

.action-btn {
    margin-bottom: 20px !important;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    border: none;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-btn:last-child {
    margin-bottom: 0 !important;
}

.action-btn:hover {
    transform: translateY(-1px);
}

/* 流程标签页容器 */
.process-tabs-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 28px;
    margin-top: 28px;
    border: 1px solid #ebeef5;
}

/* 流程标签页样式 */
.process-tabs {
    width: 100%;
}

.process-tabs .el-tabs__header {
    margin-bottom: 28px;
}

.process-tabs .el-tabs__nav {
    border-bottom: 2px solid #e4e7ed;
}

.process-tabs .el-tabs__item {
    font-size: 17px;
    padding: 14px 28px;
    color: #606266;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
}

.process-tabs .el-tabs__item:hover {
    color: #409eff;
}

.process-tabs .el-tabs__item.is-active {
    color: #409eff;
    font-weight: 600;
}

.process-tabs .el-tabs__active-bar {
    background-color: #409eff;
    height: 3px;
    border-radius: 2px;
}

.process-tabs .el-tabs__content {
    padding: 0;
    min-height: 320px;
    color: #606266;
    font-size: 16px;
}

/* 养殖信息容器样式 */
.breed-info-container {
    width: 100%;
}

/* 养殖信息头部 */
.breed-header {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e7ed;
    position: relative;
}

.breed-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #409eff, #5cb85c);
    border-radius: 2px;
}

.breed-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin-right: 20px;
}

.setting-btn {
    margin-right: 12px;
    transition: all 0.3s ease;
}

.setting-btn:hover {
    transform: scale(1.05);
}

.notification-badge {
    position: relative;
    top: -8px;
    left: -8px;
}

/* 养殖信息内容 */
.breed-content {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
    border: 1px solid #ebeef5;
}

/* 信息网格布局 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* 养殖信息项样式 */
.breed-content .info-item {
    min-width: auto;
    margin-bottom: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    padding: 18px;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.breed-content .info-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #dcdfe6;
    transform: translateY(-2px);
}

.breed-content .info-label {
    color: #606266;
    font-weight: 500;
    margin-right: 12px;
    font-size: 15px;
    display: inline-block;
    min-width: 90px;
}

.breed-content .info-value {
    color: #303133;
    font-weight: 400;
    font-size: 15px;
    word-break: break-all;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .product-card {
        flex-direction: column;
        padding: 20px;
    }

    .product-cover {
        margin-right: 0;
        margin-bottom: 24px;
    }

    .action-buttons {
        margin-left: 0;
        flex-direction: row;
        justify-content: center;
        margin-top: 24px;
    }

    .action-btn {
        margin-right: 16px !important;
        margin-bottom: 0 !important;
        width: auto;
    }

    .action-btn:last-child {
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .traceability-container {
        padding: 12px;
    }

    .product-name {
        font-size: 20px;
    }

    .info-item {
        min-width: 100%;
    }

    .inspection-report {
        flex-direction: column;
        align-items: flex-start;
    }

    .report-title {
        margin-bottom: 12px;
    }
}
</style>